<template>
  <div id="main" style="height: 100%" />
  <div class="text">
    电器
    <span>43</span>
  </div>
</template>

<script lang='ts'>
import { onMounted, PropType } from 'vue'
import * as echarts from 'echarts'

export interface item {
  value: number;
  name: string;
}

export default {
  props: {
    data: {
      type: Array as PropType<item[]>,
      required: true
    },
    other: {
      type: Object,
      default: null
    },
    style: {
      type: String,
      default: null
    }
  },
  setup (props:any) {
    onMounted(() => {

      var chartDom = document.getElementById('main')!
      var myChart = echarts.init(chartDom)
      var option

      option = {
        tooltip: {
          // 鼠标悬停tip框
          trigger: ''
        },
        // 图表上方文本
        // legend: {
        //   top: '5%',
        //   left: 'center'
        // },
        // 圆心图片
        graphic: {
          elements: [{
            type: 'image',
            style: {
              image: require('@/assets/icon_01.png'),
              width: 130,
              height: 130
            },
            // 不设置宽高定位失效
            left: 'center',
            top: 'center'
          }]
        },
        color: ['rgba(13, 205, 221, 0.8)', 'rgba(255, 255, 255, 0.8)'],
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['92%', '100%'],
            avoidLabelOverlap: false,
            // 取消鼠标悬停放大
            hoverAnimation: false,
            label: {
              show: false,
              position: 'center'
            },
            // 单个圆弧边框样式
            itemStyle: {
              borderRadius: 2,
              borderColor: '#161a1f',
              borderWidth: 2
            },
            // 鼠标悬停圆心内容
            emphasis: {
              label: {
                show: false,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            data: [
              { value: 100, name: '1' },
              { value: 100, name: '2' },
              { value: 100, name: '1' },
              { value: 100, name: '2' },
              { value: 100, name: '1' },
              { value: 100, name: '2' }

            ]
          }
        ]
      }

      option && myChart.setOption(option)
    })

    return {}
  }
}
</script>

<style lang="scss" scoped>
.text{
  margin-top: 10px;
  color: #999;
  span{
    color: #ddd;
    font-weight: 600;
  }
}
</style>
